<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">网点评价</div>
                <div class="layui-card-body" >
                    <div class="layui-form" >
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">网点名称</label>
                                <div class="layui-input-inline">
                                    <select name="wangdian" lay-verify="required" id="wangdian">
                                        <option value="">请选择标签</option>
                                        <option value="北京市丰台区科学城">北京市丰台区科学城</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">请选择月份</label>
                                <div class="layui-input-block">
                                    <input type="text" name="yuefen" lay-verify="required" placeholder=""
                                           autocomplete="off" class="layui-input" id="yufen">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">人际关系图谱</div>
                <div class="layui-card-body">
                    <div id="Chart" style="height: 600px;"></div>
                </div>
            </div>
        </div>
    </div>
<script  type="text/javascript">
    // layui.config({
    //     base: '/static/lib/' //静态资源所在路径
    // }).extend({
    //     index: 'index' //主入口模块
    // }).use(['index', 'form','layarea'], function(){
    //
    // // })
    // layui.use(['form','laydate'], function(){
    //     var laydate = layui.laydate;
    //     var form = layui.form;
    //     //执行一个laydate实例
    //     laydate.render({
    //         elem: '#yufen' //指定元素
    //         ,type: 'month'
    //     });
    //     // $('.layui-btn').on('click', function(){
    //     //     console.log("1");
    //     // });
    //     form.on('submit(LAY-app-contlist-search)', function(data){
    //         $.ajax({
    //             url:'/evaluate',
    //             type:'post',
    //             data:data.field,
    //             success:function(data){
    //
    //             }})
    //     })
    // });
    layui.config({
        base: '/static/lib/' //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['form','laydate','echarts'],
        function() {
            var laydate = layui.laydate;
            var form = layui.form;
            //执行一个laydate实例
            laydate.render({
                elem: '#yufen' //指定元素
                ,type: 'month'
            });
//            var echarts = layui.echarts,
//                option = {
//                    title: {
//                        text: '基础雷达图'
//                    },
//                    tooltip: {},
//                    legend: {
//                        data: []
//                    },
//                    radar: {
//                        // shape: 'circle',
//                        name: {
//                            textStyle: {
//                                color: '#fff',
//                                backgroundColor: '#999',
//                                borderRadius: 3,
//                                padding: [3, 5]
//                            }
//                        },
//                        indicator: [
//                            { name: '员工幸福度', max: 6500},
//                            { name: '服务质量', max: 16000},
//                            { name: '时效', max: 16000},
//                            { name: '配送速度', max: 30000},
//                            { name: '处理速度', max: 38000},
//                            { name: '劳动生产率', max: 52000},
//                            { name: '资产周转率', max: 25000}
//                        ]
//                    },
//                    series: [{
//                        name: '预算 vs 开销（Budget vs spending）',
//                        type: 'radar',
//                        // areaStyle: {normal: {}},
//                        data: [
//
//                        ]
//                    }]
//                };
            var echarts = layui.echarts;
            var myChart= echarts.init(document.getElementById('Chart'));
            var option;

            form.on('submit(LAY-app-contlist-search)', function(data){
                $.ajax({
                    url:'/get_evaluate?type=zong',
                    async: false,
                    type:"POST",
                    dataType: "text",
                    data:data.field,
                    success:function(data){
                        graph=$.parseJSON(data);
                        console.log(graph);
                        myChart.hideLoading();

                        graph.nodes.forEach(function (node) {
                            node.label = {
                                show: node.symbolSize > 30
                            };
                        });
                        option = {
                            title: {
                                text: 'Les Miserables',
                                subtext: 'Default layout',
                                top: 'bottom',
                                left: 'right'
                            },
                            tooltip: {},
                            legend: [{
                                // selectedMode: 'single',
                                data: graph.categories.map(function (a) {
                                    return a.name;
                                })
                            }],
                            animationDuration: 1500,
                            animationEasingUpdate: 'quinticInOut',
                            series: [
                                {
                                    name: 'Les Miserables',
                                    type: 'graph',
                                    layout: 'none',
                                    data: graph.nodes,
                                    links: graph.links,
                                    categories: graph.categories,
                                    roam: true,
                                    label: {
                                        position: 'right',
                                        formatter: '{b}'
                                    },
                                    lineStyle: {
                                        color: 'source',
                                        curveness: 0.3
                                    },
                                    emphasis: {
                                        focus: 'adjacency',
                                        lineStyle: {
                                            width: 10
                                        }
                                    }
                                }
                            ]
                        };

                        myChart.setOption(option);

//                        if(data.res.toString()!=='fail'){
//
//
//                        }else{
//                            layer.open({
//                                title: '查询失败'
//                                ,content: '未查询到相关记录！'
//                            });
//                        }
                    }})
            })
        }
    );
</script>
</body>
</html>